<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>魔兽世界</title>
    </head>
    <body>
        <div id="app">
            <p>{{results}}</p>
            <p>{{info.name}}</p>
            <p>{{rgb}}</p>
            <input type="text" v-model="username">
            <button @click="show">显示rgb</button>
        </div>
        <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
        <script src="/lib/vue.js"></script>
        <script>
            // import axios from 'https://cdn.jsdelivr.net/npm/axios@1.4.0/+esm';
            const vm = new Vue({
                el:'#app',
                data:{
                    username:'33',
                    results:'123',
                    info:{name:'admin'},
                    r:0,
                    g:0,
                    b:0
                },
                methods:{
                    show(){
                        this.results = this.rgb;
                    }
                },
                filters:{

                },
                watch:{
                    // username(newVal,oldVal){
                    //     if(newVal==oldVal){
                    //         this.result = '两次输入值不能相等';
                    //         return;
                    //     }
                    //     this.result=newVal+oldVal;
                    // }
                    // async username(newVal){
                    //     if(newVal==='') return;
                    //     // const {data:res} = await axios.get('https://www.escook.cn/api/finduser/'+newVal);
                    //     // console.log(res);
                    //     console.log(this.username)
                        
                    // }
                    username:{
                        handler:async function(newVal){
                            this.info.name = this.username;
                            this.r=Number.parseInt(newVal);
                        },
                        immediate:true
                    },
                    info:{
                        handler(newVal){
                            console.log('info.name',this.info.name);
                        },
                        deep:true
                    },
                    'info.name':{
                        handler(newVal){
                            console.log("newVal",newVal);
                            
                        }
                    }
                },
                computed:{
                    rgb(){
                        return this.r+''+this.g+''+this.b;
                    }
                }
            })
        </script>
    </body>
</html>